<template>
  <div class="common-container">
    <main-title>
      <el-button type="primary" class="btn-add" size="small" @click="addInit">新用户组</el-button>
    </main-title>

    <div class="content-wrap">
      <div class="search-wrap">
        <div class="common-search ym-box">
          <el-form :model="searchForm" size="small" inline @submit.prevent>
            <el-form-item class="w-auto">
              <search-input
                v-model="searchForm.name"
                placeholder="输入用户组名查询"
                @search="search"
              />
              <!-- <el-input v-model="searchForm.name" placeholder="请输入用户组名" @keyup.enter="search" /> -->
            </el-form-item>
            <!-- <el-form-item class="btn-search-item">
              <el-button type="primary" class="btn-search" @click="search">查询</el-button>
            </el-form-item>-->
          </el-form>
        </div>
      </div>
      <div class="table-wrap ym-box">
        <ym-table
          v-loading="state.tableLoading"
          :style="{ height: `${tableHeight}px` }"
          :height="tableHeight"
          :data="state.tableData"
          :column-data="columnData"
        >
          <template #operator="slotProps">
            <el-button type="text" class="btn-edit" @click="editInit(slotProps.row)"
              >修改</el-button
            >

            <el-button type="text" class="btn-del" @click="del(slotProps.row)">删除</el-button>
          </template>
        </ym-table>
        <pagination
          v-model:currentPage="state.pageObj.pageNum"
          v-model:pageSize="state.pageObj.pageSize"
          :total="state.pageObj.total"
          @pagination="search"
        />
      </div>
    </div>

    <drawer
      v-model:visible="state.dialogVisible"
      :size="640"
      :title="state.dialogTitle"
      @close="closeDrawer"
    >
      <edit-form
        ref="formWrapper"
        v-model:form="_state.editForm"
        :is-add="state.isAdd"
        :project-options="_state.projectOptions"
        @cancel="handleClose"
        @confirm="confirm"
      />
    </drawer>
  </div>
</template>

<script lang="ts" setup>
import { reactive, ref, toRefs } from 'vue'

import SearchInput from '@/components/CommonSearch/SearchInput/index.vue'
import EditForm from './EditForm.vue'

import GroupApi from '@/api/backend/group'
import ProjectApi from '@/api/project'

import { useTable } from '@/utils/common'

import { commonHandle } from '@/views/mixins/common'
import tableOptions from '&/mixins/tableOptions'
import { Drawer, MainTitle, Pagination, YmTable } from '&/mixins/useComponent'
import IBaseObj from '#/index'

const { tableHeight } = useTable(tableOptions)

const { state, handleAdd, handleEdit, handleClose, handleSearch, handleDelete } = commonHandle()

const columnData = [
  {
    label: '用户组名',
    prop: 'name',
  },
  {
    label: '项目',
    prop: 'pid',
  },
  {
    label: '创建时间',
    prop: 'createTime',
  },
]

const _state: IBaseObj = reactive({
  searchForm: {
    name: '',
  },
  editForm: {
    name: '',
    pid: '',
    status: 1,
    remark: '',
  },
  projectOptions: [],
})

const { searchForm } = toRefs(_state)

const getProjectOptions = async () => {
  const data = await ProjectApi.getProjectList({})
  _state.projectOptions = data || []
}
getProjectOptions()

const search = () => {
  handleSearch(GroupApi.getGroupByPage, _state.searchForm)
}
search()

const addInit = () => {
  handleAdd('创建用户组')
}

const editInit = (row: IBaseObj) => {
  handleEdit('修改用户组')
  _state.editForm = { ...row }
}

const del = (row: IBaseObj) => {
  handleDelete({
    url: GroupApi.delUrl,
    id: row.gid,
    message: '此操作将永久删除该用户组，是否继续?',
    success: search,
  })
}

const formWrapper = ref()
const addOrEditReset = () => {
  formWrapper.value.clear()
  _state.editForm = {
    name: '',
    pid: '',
    status: 1,
    remark: '',
  }
}

const closeDrawer = () => {
  state.isAdd = true
  addOrEditReset()
}

const confirm = () => {
  handleClose()
  search()
}
</script>
